<?php 
	$diadiemdulichs = $viewModel->get('diadiemdulichs'); 
	$tinhthanhs = $viewModel->get('tinhthanhs'); 
	$kinhdo = $viewModel->get('kinhdo'); 
	$vido = $viewModel->get('vido'); 
	$diadiemgannhats = $viewModel->get('diadiemgannhats'); 
 ?>

<section class="form_search">
		<div class="container">	
			<div class="head">
					<a href="<?php echo BASE_URL ?>"><img src="<?php echo PATH_IMAGE ?>logo.jpg" title="Tra cứu Du lịch Miền Trung" height="150px" alt="ve_mien_trung_logo"/></a>
			</div>
			<form  action="search" method="post" onsubmit="return validation();" name="form_search_place">	
				<div class="head row_search">	
					<input type="text" class="form-control search" placeholder="Nhập địa điểm bạn cần tìm" class="form-control search" name="keyword" id="autocomplete-dynamic"/>
					<!-- <input type="text" class="form-control search" height="40px" placeholder="Nhập địa điểm bạn cần tìm">																				 -->
				</div>
				<div class="row head">					
					<button type="submit" class="btn btn-warning btn-lg">Tìm kiếm <span class="glyphicon glyphicon-circle-arrow-right"></span></button>					
				</div>
			</form>		
		</div>		

	</section>
	<section class="center_content_body">
		<div class="container">
			<div class="row">
				<div class="col-md-2 col-xs-6 province_zone">
					<form action="tracuu" method="post" id="form_getlocation" onsubmit="return check();" name="form_getlocation">
						<input type="hidden" id="vido" name="vido"/>
						<input type="hidden" id="kinhdo" name="kinhdo"/>
						<button type="submit" class="geolocation" onclick="getLocation();">
								<div class="metro-top">
									<p class="title">Xem vị trí hiện tại</p>
									<span class="glyphicon glyphicon-screenshot"></span>
								</div>				
						</button>
					</form>
						
						
				</div>
				<?php foreach ($tinhthanhs as $tinhthanh) { ?>   					
						<a class="province_zone" href="<?php echo BASE_URL.'diadiemdulich/province/'.$tinhthanh->AliasTinhThanh ?>">
							<div class="col-md-2 col-xs-6">
								<div class="metro-top">
									<p class="title"><?php echo $tinhthanh->TenTinh ?></p>
									<span class="glyphicon glyphicon-map-marker"></span> <?php echo $tinhthanh->SoDiaDiem ?>
								</div>
							</div>
						</a>						
				<?php } ?>
				
			</div>
			<div class="" id="alert" role="alert"></div>
			<?php if(!empty($kinhdo)&& !empty($vido)){ ?>
			<div class="row">
				<div class="col-xs-12 col-md-9">
					<h2 class="module">Bản đồ</h2>
					<div class="map" id="map">
						
					</div>
					<script type="text/javascript">
					      function initialize() {
					      	var myLatlng = new google.maps.LatLng(<?php echo $vido ?>,<?php echo $kinhdo ?>);
					        var mapOptions = {
					          center: myLatlng,
					          zoom: 14
					        };
					        var map = new google.maps.Map(document.getElementById('map'),
					            mapOptions);
					       var infoWindow = new google.maps.InfoWindow;

					        // current place					        
					      		
					      		var contentString = '<p class="curent_location">'+
					       							'Vị trí hiện tại'+
					       						'</p>';
					       		var marker = new google.maps.Marker({
						            map: map,
						            position: myLatlng,
						            icon: 'http://hoangquancantho.com.vn/wp-content/themes/phuan/images/map/single-family-home-map-icon.png'
						          });
					       		infoWindow.setContent(contentString);
						        infoWindow.open(map, marker);
						        bindInfoWindow(marker, map, infoWindow, contentString);

					        //end curent place
					        <?php foreach($diadiemgannhats as $diadiemgannhat) {?>
					      		var point = new google.maps.LatLng(<?php echo $diadiemgannhat ->ViDo ?>,
						              <?php echo $diadiemgannhat ->KinhDo ?>);
					      		
					      		var contentString = '<div class="row1 info_place">'+
					       							'<div class="col-md-4">'+
						       						'<img src="<?php echo PATH_IMAGE_PLACE.$diadiemgannhat->HinhAnh ?>" class="image_place">'+	
					       							'</div>'+
					       							'<div class="col-md-8">'+
						       							'<h1><?php echo $diadiemgannhat->TenDiem; ?></h1>'+
						       							'<?php echo $diadiemgannhat->DiaChi; ?>'+
					       							'</div>'+
					       						'</div>';
					       		<?php $icon = PATH_ICON.$diadiemgannhat->LoaiDiaDiem.'.png'; ?>
					       		var marker = new google.maps.Marker({
						            map: map,
						            position: point,
						            icon: '<?php echo $icon ?>'
						          });

					       		bindInfoWindow(marker, map, infoWindow, contentString);
					      	<?php } ?>  
					      	
					    //      var marker = new google.maps.Marker({
							  //     position: myLatlng,
							  //     map: map,
							  //     title: 'Hello World!'
							  // });
					       

					      }
					      //end  function initialize()
					      function bindInfoWindow(marker, map, infoWindow, html) {
						      google.maps.event.addListener(marker, 'click', function() {
						        infoWindow.setContent(html);
						        infoWindow.open(map, marker);
						      });
    						}
					      
					      google.maps.event.addDomListener(window, 'load', initialize);
					 </script>
				</div>
				<div class="col-xs-12 col-md-3">
  					<h2 class="module">Địa điểm gần đây</h2>
  					<?php foreach ($diadiemgannhats as $diadiemgannhat) { ?>                                    
  					<div class="media">
					  <a class="pull-left" href="<?php echo BASE_URL.'diadiemdulich/place/'.$diadiemgannhat->Alias ?>">
					    <img class="media-object" height="70px" width="70px" src="<?php echo PATH_IMAGE_PLACE.$diadiemgannhat->HinhAnh ?>" alt="...">
					  </a>
					  <div class="media-body">
					    <h3 class="media-heading"><a href="<?php echo BASE_URL.'diadiemdulich/place/'.$diadiemgannhat->Alias ?>"><?php echo $diadiemgannhat->TenDiem ?></a></h3>
					    <p class="address"><?php echo $diadiemgannhat->DiaChi ?></p>
					    <p><span class="glyphicon glyphicon glyphicon-eye-open rate"> <?php echo number_format($diadiemgannhat->TongSoLuotXem) ?></span><span class="distance"><?php echo number_format($diadiemgannhat->distance,2) ?> km</span></p>
					  </div>
					</div>
					<?php } ?>				

					
  				</div>

			</div>
			<?php } ?>
		</div>
	</section>
	<script>
		var x = document.getElementById("alert");
		function getLocation() {
		    if (navigator.geolocation) {
		        navigator.geolocation.getCurrentPosition(showPosition);
		        //$( "#form_getlocation" ).submit();
		    } else { 
		        x.innerHTML = "Trình duyệt bạn đang dùng không hỗ trợ tính năng này.";		       
		    }
		}
		function showPosition(position) {
			 document.form_getlocation.vido.value = position.coords.latitude; 
		     document.form_getlocation.kinhdo.value = position.coords.longitude;	
		}
		function check(){
			if( document.form_getlocation.vido.value!='')
			{
				return true;
			}
			else
			{ return false;}
		}
	</script>
	<!-- <section class="center_content_footer">
		<div class="container">
			<div class="row">
				<div class="col-md-2 col-xs-4">
					<div class="metro-bottom">
						<img class="icon2" src="<?php echo PATH_IMAGE ?>icon/dia-diem-du-lich.png" alt="Địa điểm tham quan miền Trung">
						<p class="title2">Địa điểm tham quan</p>
					</div>
				</div>
				<div class="col-md-2 col-xs-4">
					<div  class="metro-bottom">
						<img class="icon2" src="<?php echo PATH_IMAGE ?>icon/khach-san.png" alt="Khách sạn miền Trung">
						<p class="title2">Khách sạn</p>
					</div>
				</div>
				<div class="col-md-2 col-xs-4">
					<div class="metro-bottom">
						<img class="icon2" src="<?php echo PATH_IMAGE ?>icon/nha-hang.png" alt="Nhà hàng miền Trung">
						<p class="title2">Nhà hàng</p>
					</div>
				</div>
				<div class="col-md-2 col-xs-4">
					<div class="metro-bottom">
						<img class="icon2" src="<?php echo PATH_IMAGE ?>icon/khu-mua-sam.png" alt="Khu mua sắm miền Trung">
						<p class="title2">Khu mua sắm</p>
					</div>
				</div>
				<div class="col-md-2 col-xs-4">
					<div  class="metro-bottom">
						<img class="icon2" src="<?php echo PATH_IMAGE ?>icon/quan-an.png" alt="Quán ăn miền Trung">
						<p class="title2">Quán ăn</p>
					</div>
				</div>
				<div class="col-md-2 col-xs-4">
					<div class="metro-bottom">
						<img class="icon2" src="<?php echo PATH_IMAGE ?>icon/quan-bar.png" alt="Quán bar - cafe miền Trung">
						<p class="title2">Quán bar - cafe</p>
					</div>
				</div>
			</div>
		</div>
	</section> -->
	
	<nav class="nav">		
		<div class="container">	
			
			<div class="row">
				
					<ul class="nav nav-pills" id="menu" role="tablist">
						<li><a href="index.html">Trang chủ</a></li>
						<li><a href="#">Khám phá Miền Trung</a></li>
						<li><a href="#">Địa danh</a></li>
						<li><a href="#">Ẩm thực</a></li>
						<li><a href="#">Lễ hội</a></li>
						<li><a href="#">Hình ảnh | Clip</a></li>
						<li><a href="#">Khách sạn</a></li>
						<li><a href="#">Tour du lịch miền trung</a></li>
						<li><a href="#">Hệ thống tra cứu du lịch</a></li>
					</ul>
				
			</div>
			<div class="row copyright">						
				<a href="http://vemientrung.com">Hệ thống tra cứu du lịch miền trung - Vemientrung.com</a>
				
			</div>
		</div>		
		
	</nav>
	<script type="text/javascript">
			var countries = {
				<?php foreach ($diadiemdulichs as $diadiemdulich) { ?>                                    
			    "<?php echo $diadiemdulich->TuKhoaDiaDiem; ?>": "<?php echo $diadiemdulich->TenDiem; ?>",
			   <?php } ?>
			}
	</script>